import { defineStore } from 'pinia';
import { ref, watch } from 'vue';

type IContainerPattern = 'default' | 'simple' | 'legend' | 'classic' | 'fashion';
export const useLayoutStore = defineStore('layout', {
  state: () => {
    const layout = ref<IContainerPattern>('fashion');
    const logo = ref('https://picsum.photos/100/100');
    const headerHeight = ref(80);
    const asideWidth = ref(200);
    const footerHeight = ref(50);
    const expand = ref(true);

    const setLayout = (pattern: IContainerPattern) => {
      layout.value = pattern;
    };

    const getLayout = () => {
      return layout.value;
    };
    watch(expand, (val) => {
      if (val) {
        asideWidth.value = 200;
      } else {
        asideWidth.value = 60;
      }
    })
    return {
      layout,
      logo,
      expand,
      setLayout,
      getLayout,
      headerHeight,
      asideWidth,
      footerHeight,
    };
  },
});
